<template>
  <div class="realTime">
    <!--左边窗口-->
    <div style="background-color: #fff;height: 100%;overflow: hidden">
      <div class="box">
        <div class="play_box">
          <!-- <div id="play" class="videoWindow" :style="liveStyle"></div>
          <div id="playone" class="videoWindow" :style="liveStyle"></div>
          <div id="playtwo" class="videoWindow" :style="liveStyle"></div>
          <div id="playthree" class="videoWindow" :style="liveStyle"></div>
          <div id="playfour" class="videoWindow" :style="liveStyle"></div>
          <div id="playfive" class="videoWindow" :style="liveStyle"></div>
          <div id="playsix" class="videoWindow" :style="liveStyle"></div>
          <div id="playseven" class="videoWindow" :style="liveStyle"></div>
          <div id="playeight" class="videoWindow" :style="liveStyle"></div>
          <div id="playnine" class="videoWindow" :style="liveStyle"></div>
          <div id="playten" class="videoWindow1" :style="liveStyle"></div>
          <div id="playten1" class="videoWindow1" :style="liveStyle"></div> -->
          <div :class="videoWindow + index" class='videoWindow' v-for="(item, index) in data " :key="index"
            :style="liveStyle" @click="btn_slice(index)">
            <div class="title" v-if="spilt == 9">{{item.title}}</div>
            <div :id="item.id"
              style="width: 100%;height: 100%;overflow: hidden;  border:.02rem solid rgba(0, 0, 0, .0);box-sizing: border-box;"
              :class="toggle == index ? 'frame' : ''" ></div>
            </div>
          </div>
           <!-- 分屏 -->
           <div class="headers" >
              <i class="el-icon-full-screen btn" :class="{ active: spilt == 1 }" @click="btn_spilt"/>
              <!-- <i class="el-icon-menu btn" :class="{ active: spilt == 4 }" @click="spilt = 4" /> -->
              <i class="el-icon-s-grid btn" :class="{ active: spilt == 9 }" @click="btn_spilt_s" />
        </div>

      </div>

      <!--右边列表-->
      <div class="list">
        <div class="videoList">
          <div class="videoList_title">
            <!--<span class='icon iconfont icon-chazhaobiaodanliebiao'></span>-->
            <span>设备列表</span>

            <a :href="'/vapi/yingshi/downloadExcel?areaId=' + areaId">
              <el-button type="primary" size="small">导出</el-button>
            </a>

          </div>
          <div class="videoList_content">
            <div class="TDlist">
              <table>
                <thead>
                  <tr>
                    <th>设备名称</th>
                    <!-- <th>序列号</th>
                    <th>通道号</th>
                    <th>操作</th> -->
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(t, i) in tongdao" :class="i + 'TD'" @click="lookTD(t, i)">
                    <td>{{ t.name }}</td>
                    <!-- <td>{{ t.uniqueInfo.split("-")[0] }}</td>
                    <td>{{ t.uniqueInfo.split("-")[1] }}</td>
                    <td @click.stop="xig(t)"> <span>修改</span> </td> -->
                  </tr>
                </tbody>
              </table>

            </div>
          </div>
        </div>
        <!--分页 B-->
        <!-- <el-pagination id="change_color" @current-change="handleCurrentChange" background :page-size=page.size
          layout="total, prev, pager, next" :total=page.totalElements>
        </el-pagination> -->
        <!--分页 E-->
      </div>
    </div>

    <!--编辑框 B-->
    <div class="masklayer" v-show="iseditbox">
      <div class="editbox">
        <div class="editboxTitle">
          <span>修改设备</span>
        </div>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
          <el-form-item label="设备名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item label="设备序列号">
            <el-input v-model="ruleForm.xlh" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="设备通道号">
            <el-input v-model="ruleForm.tdh" :disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="经度" prop="lon">
            <el-input v-model="ruleForm.lon"></el-input>
          </el-form-item>
          <el-form-item label="纬度" prop="lat">
            <el-input v-model="ruleForm.lat"></el-input>
          </el-form-item>
          <el-form-item label="海拔" prop="altitude">
            <el-input v-model="ruleForm.altitude"></el-input>
          </el-form-item>
          <el-form-item label="运行状态" prop="status">
            <el-select v-model="ruleForm.status" placeholder="请选择运行状态" style="width: 100%;">
              <el-option label="正常" value="正常"></el-option>
              <el-option label="维修中" value="维修中"></el-option>
              <el-option label="损坏" value="损坏"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="部署时间">
            <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
          </el-form-item>
          <el-form-item label="设备编号">
            <el-input v-model="ruleForm.deviceNumber"></el-input>
          </el-form-item>
          <el-form-item label="设备型号">
            <el-input v-model="ruleForm.deviceModel"></el-input>
          </el-form-item>
          <el-form-item label="厂商名称">
            <el-input v-model="ruleForm.manufacture"></el-input>
          </el-form-item>

        </el-form>
        <div class="bottombtn">
          <span class="cancelf" @click="resetForm('ruleForm')" style="margin-right: .2rem;">取消</span>
          <span class="greenf" @click="submitForm('ruleForm')">确定</span>
        </div>
      </div>
    </div>
    <!--编辑框 E-->

  </div>
</template>
<script>

import http from '../../utils/http';
import api from '../../utils/api';
import EZUIKit from 'ezuikit-js';
import EasyPlayer from '@easydarwin/easyplayer'
// import screenfull from 'screenfull'
// screenClick() {

// },
export default {
  components: {
    EasyPlayer,
  },
  data() {
    return {
      areaId: '',
      spilt: 1,//分屏
      ids: [],//设备id
      box_show: true,
      box_hide: false,
      form: {},
      tongdao: [],
      page: {},
      toggle: 0,
      accessToken: '',
      channelNo: '',//通道号
      //        deviceSerial: 'D55908472',//序列号
      deviceSerial: '',//序列号
      direction: '8',
      speed: '2',
      yanzhengma: '',
      SRC: '',
      clickId: '',
      pageSize: '12',
      pageNum: 0,
      showList: true,
      name: '',
      num: '',
      // screenState: false,
      player: null,
      iseditbox: false,
      // data: ['play', 'playone', 'playtwo', 'playthree', 'playfour', 'playfive', 'playsix', 'playseven', 'playeight', 'playnine', 'playten', 'playten1'],
      data:[
        {id:'play' , title:'沙口黄洞视频'},
        {id:'playone' , title:'沙口黄洞抓拍'},
        {id:'playtwo' , title:'蚊坪视频'},
        {id:'playthree' , title:'蚊坪管护点抓拍'},
        {id:'playfour' , title:'石牯塘八宝'},
        {id:'playfive' , title:'沙口黄洞瞭望塔'},
        {id:'playsix' , title:'石牯塘瞭望台'},
        {id:'playseven' , title:'沙口镇黄洞'},
        {id:'playeight' , title:'沙口镇平峰'},
        {id:'playnine' , title:'前进基站'},
        {id:'playten' , title:'锦潭气象站'},
        {id:'playten1' , title:'横石塘建山'},
      ],
      ruleForm: {
        id: "",
        name: '',
        xlh: "",
        tdh: "",
        lon: '',
        lat: '',
        altitude: '',
        installTime: "",
        date: "",
        status: "",
        deviceNumber: "",
        deviceModel: "",
        manufacture: ""
      },
      rules: {
        name: [
          { required: true, message: '请输入设备名称', trigger: 'blur' }
        ],
        lon: [
          { required: true, message: '请输入经度', trigger: 'blur' }
        ],
        lat: [
          { required: true, message: '请输入经度', trigger: 'blur' }
        ],
        altitude: [
          { required: true, message: '请输入海拔', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '请选择运行状态', trigger: 'change' }
        ],
      },
    }
  },
  created() {
    this.areaId = sessionStorage.getItem('areaId');
  },
  mounted() {
    this.getysy();
  },
  beforeRouteLeave(to, from, next) {
    this.player = null;
    next();
  },
  beforeDestroy() {
    this.player && this.player.stop()
  },
  computed: {
    liveStyle() {
      let style = { width: '100%', height: '100%' }
      switch (this.spilt) {
        case 4:
          style = { width: '50%', height: 'calc(49% - .4rem)' }
    
          break
        case 9:
          style = { width: '25%', height: '33.2%' }
          break
      }
      return style
    }

  },
  methods: {
    xig(d) {
      this.ruleForm.id = d.id;
      this.ruleForm.xlh = d.uniqueInfo.split("-")[0];
      this.ruleForm.tdh = d.uniqueInfo.split("-")[1];
      this.ruleForm.name = d.name;
      this.ruleForm.lon = d.lon;
      this.ruleForm.lat = d.lat;
      this.ruleForm.altitude = d.altitude;
      if (d.installTime == null || d.installTime == '') {
        this.ruleForm.date = '';
      } else {
        this.ruleForm.date = new Date(d.installTime);
      }

      this.ruleForm.status = d.status;
      this.ruleForm.deviceNumber = d.deviceNumber;
      this.ruleForm.deviceModel = d.deviceModel;
      this.ruleForm.manufacture = d.manufacture;
      this.iseditbox = true;
    },
    trandate(daterange) {
      let t = '';
      if (daterange != null || daterange != '') {
        var year = daterange.getFullYear();
        var month = daterange.getMonth() + 1;
        var date = daterange.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (date >= 0 && date <= 9) {
          date = "0" + date;
        }
        t = year + "-" + month + "-" + date;
      }

      return t;
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let then = this, obj = {
            id: this.ruleForm.id,
            name: this.ruleForm.name,
            lon: this.ruleForm.lon,
            lat: this.ruleForm.lat,
            altitude: this.ruleForm.altitude,
            installTime: this.trandate(this.ruleForm.date),
            status: this.ruleForm.status,
            deviceNumber: this.ruleForm.deviceNumber,
            deviceModel: this.ruleForm.deviceModel,
            manufacture: this.ruleForm.manufacture
          };
          (async function () {
            let res = await http.post(api.updateDeviceName, obj)
            if (res.data.code == '200') {
              then.success('修改成功')
              then.iseditbox = false;
              then.gxdata();
            } else {
              then.warn(res.data.message)
            }
          })()
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.iseditbox = false
    },

    gxdata() {
      var vm = this;
      (async function () {
        let res = await http.get(api.page + '?areaId=' + vm.areaId + '&pageNum=' + vm.pageNum + '&pageSize=' + vm.pageSize);
        if (res.data.code == 200) {
          vm.tongdao = res.data.data.content;
        } else {
          vm.$message({
            message: res.data.message,
            type: 'error',
            duration: '1000'
          });
        }
      })();
    },
    getysy() {
      let vm = this;
      vm.$axios.get(api.accessInfo + '?areaId=' + this.areaId)
        .then(function (response) {
          let xu = [], yan = [];
          if (response.data.code == 200) {
            for (let k in response.data.data.codeMap) {
              xu.push(k)
              yan.push(response.data.data.codeMap[k])
            }
            vm.accessToken = response.data.data.token;
            vm.yanzhengma = yan
            vm.deviceSerial = xu
            vm.getPage();
            vm.getPage1();
          } else {
            vm.$message({
              message: response.data.message,
              type: 'error',
              duration: '1000'
            });
          }
        })
        .catch(function (error) {
        });
    },
    getPage() {
      var vm = this;
      (async function () {
        let res = await http.get(api.page + '?areaId=' + vm.areaId + '&pageNum=' + vm.pageNum + '&pageSize=' + vm.pageSize);
        if (res.data.code == 200) {
          vm.tongdao = res.data.data.content;
          console.log(vm.tongdao, 'vm.tongdao ');
          vm.page = res.data.data
          if (vm.tongdao.length > 0) {
            // vm.tongdao.forEach((item, index) => {
            //   let arr = item.uniqueInfo.split('-');
            //   vm.ids.push(item.id)
            //   // console.log(vm.ids, 'id');
            //   // vm.ids.push(item.id)
            //   let xlh = arr[0], tdh = arr[1];
            //   vm.unitplayer(vm.yanzhengma, vm.accessToken, xlh, tdh);
            //   console.log(vm.yanzhengma, vm.accessToken, xlh, tdh , vm.ids , '11');
            //   vm.unitplayer(vm.yanzhengma, vm.accessToken, xlh, tdh, id);
            // });
            // vm.unitplayer(vm.yanzhengma, vm.accessToken, xlh, tdh);
            let o = vm.tongdao[0], arr = o.uniqueInfo.split('-');
            let o1 = vm.tongdao[1], arr1 = o1.uniqueInfo.split('-');
            let o2 = vm.tongdao[2], arr2 = o2.uniqueInfo.split('-');
            let o3 = vm.tongdao[3], arr3 = o3.uniqueInfo.split('-');
            let o4 = vm.tongdao[4], arr4 = o4.uniqueInfo.split('-');
            let o5 = vm.tongdao[5], arr5 = o5.uniqueInfo.split('-');
            let o6 = vm.tongdao[6], arr6 = o6.uniqueInfo.split('-');
            let o7 = vm.tongdao[7], arr7 = o7.uniqueInfo.split('-');
            let o8 = vm.tongdao[8], arr8 = o8.uniqueInfo.split('-');
            let o9 = vm.tongdao[9], arr9 = o9.uniqueInfo.split('-');
            let o10 = vm.tongdao[10], arr10 = o10.uniqueInfo.split('-');
            let o11 = vm.tongdao[11], arr11 = o11.uniqueInfo.split('-');
            let xlh = arr[0], tdh = arr[1];
            let xlh1 = arr1[0], tdh1 = arr1[1];
            let xlh2 = arr2[0], tdh2 = arr2[1];
            let xlh3 = arr3[0], tdh3 = arr3[1];
            let xlh4 = arr4[0], tdh4 = arr4[1];
            let xlh5 = arr5[0], tdh5 = arr5[1];
            let xlh6 = arr6[0], tdh6 = arr6[1];
            let xlh7 = arr7[0], tdh7 = arr7[1];
            let xlh8 = arr8[0], tdh8 = arr8[1];
            let xlh9 = arr9[0], tdh9 = arr9[1];
            let xlh10 = arr10[0], tdh10 = arr10[1];
            let xlh11 = arr11[0], tdh11 = arr11[1];
            vm.unitplayer(vm.yanzhengma, vm.accessToken, xlh, tdh);
            vm.unitplayer1(vm.yanzhengma, vm.accessToken, xlh1, tdh1);
            vm.unitplayer2(vm.yanzhengma, vm.accessToken, xlh2, tdh2);
            vm.unitplayer3(vm.yanzhengma, vm.accessToken, xlh3, tdh3);
            vm.unitplayer4(vm.yanzhengma, vm.accessToken, xlh4, tdh4);
            vm.unitplayer5(vm.yanzhengma, vm.accessToken, xlh5, tdh5);
            vm.unitplayer6(vm.yanzhengma, vm.accessToken, xlh6, tdh6);
            vm.unitplayer7(vm.yanzhengma, vm.accessToken, xlh7, tdh7);
            vm.unitplayer8(vm.yanzhengma, vm.accessToken, xlh8, tdh8);
            vm.unitplayer9(vm.yanzhengma, vm.accessToken, xlh9, tdh9);
            vm.unitplayer10(vm.yanzhengma, vm.accessToken, xlh10, tdh10);
            vm.unitplayer11(vm.yanzhengma, vm.accessToken, xlh11, tdh11);
          }
        } else {
          vm.$message({
            message: res.data.message,
            type: 'error',
            duration: '1000'
          });
        }
      })();
    },
    getPages() {
      var vm = this;
      (async function () {
        let res = await http.get(api.page + '?areaId=' + vm.areaId + '&pageNum=' + vm.pageNum + '&pageSize=' + vm.pageSize);
        if (res.data.code == 200) {
          vm.tongdao = res.data.data.content;
          vm.page = res.data.data
          if (vm.tongdao.length > 0) {
            vm.lookTD(vm.tongdao[0], 0)
          }
        } else {
          vm.$message({
            message: res.data.message,
            type: 'error',
            duration: '1000'
          });
        }
      })();
    },
    lookTD(e, i) {
      console.log(e, i);
      this.toggle = i
      $("." + i + "TD").addClass('TDbackground')
      $("." + i + "TD").siblings().removeClass('TDbackground');
      let arr = e.uniqueInfo.split('-');
      let xlh = arr[0], tdh = arr[1], yzm = this.yanzhengma;
      this.player.stop()
        .then(() => {
          this.player.play(
            {
              url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live"
            });
        });
    },
    unitplayer(yzm, token, xlh, tdh) {
      // var w = 0
      // if(this.spilt == 1){
      //   w = '100%'
      // }else{
      //   w = '30%'
      // }
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'play',
        // id: this.ids,
        accessToken: token,
        url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        // footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // splitBasis: 1,
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: w,
        // height: '50%'
      });
      this.player.stop();
      // 切换为直播
      this.player.play();
    },
    unitplayer1(yzm, token, xlh, tdh) {
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'playone',
        // id: this.ids,
        accessToken: token,
        url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        //footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // splitBasis: 1,
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: '100%',
        // height: '85%'
      });
      this.player.stop();
      // 切换为直播
      this.player.play();

    },
    unitplayer2(yzm, token, xlh, tdh) {
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'playtwo',
        // id: this.ids,
        accessToken: token,
        url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        //footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // splitBasis: 1,
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: '100%',
        // height: '85%'
      });
      this.player.stop();
      // 切换为直播
      this.player.play();

    },
    unitplayer3(yzm, token, xlh, tdh) {
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'playthree',
        // id: this.ids,
        accessToken: token,
        url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        //footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // splitBasis: 1,
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: '100%',
        // height: '85%'
      });
      this.player.stop();
      // 切换为直播
      this.player.play();

    },
    unitplayer4(yzm, token, xlh, tdh) {
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'playfour',
        // id: this.ids,
        accessToken: token,
        url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        //footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // splitBasis: 1,
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: '100%',
        // height: '85%'
      });
      this.player.stop();
      // 切换为直播
      this.player.play();

    },
    unitplayer5(yzm, token, xlh, tdh) {
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'playfive',
        // id: this.ids,
        accessToken: token,
        url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        //footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // splitBasis: 1,
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: '100%',
        // height: '85%'
      });
      this.player.stop();
      // 切换为直播
      this.player.play();

    },
    unitplayer6(yzm, token, xlh, tdh) {
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'playsix',
        // id: this.ids,
        accessToken: token,
        url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        //footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // splitBasis: 1,
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: '100%',
        // height: '85%'
      });
      this.player.stop();
      // 切换为直播
      this.player.play();

    },
    unitplayer7(yzm, token, xlh, tdh) {
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'playseven',
        // id: this.ids,
        accessToken: token,
        url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        //footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // splitBasis: 1,
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: '100%',
        // height: '85%'
      });
      this.player.stop();
      // 切换为直播
      this.player.play();

    },
    unitplayer8(yzm, token, xlh, tdh) {
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'playeight',
        // id: this.ids,
        accessToken: token,
        url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        //footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // splitBasis: 1,
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: '100%',
        // height: '85%'
      });
      this.player.stop();
      // 切换为直播
      this.player.play();

    },
    unitplayer9(yzm, token, xlh, tdh) {
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'playnine',
        // id: this.ids,
        accessToken: token,
        url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        //footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // splitBasis: 1,
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: '100%',
        // height: '85%'
      });
      this.player.stop();
      // 切换为直播
      this.player.play();

    },
    unitplayer10(yzm, token, xlh, tdh) {
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'playten',
        // id: this.ids,
        accessToken: token,
        url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        //footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // splitBasis: 1,
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: '100%',
        // height: '85%'
      });
      this.player.stop();
      // 切换为直播
      this.player.play();

    },
    unitplayer11(yzm, token, xlh, tdh) {
      this.player = new EZUIKit.EZUIKitPlayer({
        autoplay: true,
        id: 'playten1',
        // id: this.ids,
        accessToken: token,
        url: "ezopen://" + yzm + "@open.ys7.com/" + xlh + "/" + tdh + ".hd.live",
        template: "theme", // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
        // 视频上方头部控件
        //header: ["capturePicture", "save", "zoom"], // 如果templete参数不为simple,该字段将被覆盖
        //plugin: ['talk'],                       // 加载插件，talk-对讲
        // 视频下方底部控件
        //footer: ["fullScreen"], // 如果template参数不为simple,该字段将被覆盖
        audio: 0, // 是否默认开启声音 0 - 关闭 1 - 开启
        // splitBasis: 1,
        // openSoundCallBack: data => console.log("开启声音回调", data),
        // closeSoundCallBack: data => console.log("关闭声音回调", data),
        // startSaveCallBack: data => console.log("开始录像回调", data),
        // stopSaveCallBack: data => console.log("录像回调", data),
        // capturePictureCallBack: data => console.log("截图成功回调", data),
        // fullScreenCallBack: data => console.log("全屏回调", data),
        // getOSDTimeCallBack: data => console.log("获取OSDTime回调", data),
        // width: '100%',
        // height: '85%'
      });
      this.player.stop();
      // 切换为直播
      this.player.play();

    },
    handleCurrentChange(val) {
      this.pageNum = val - 1;
      this.getPages();
    },
    success(text) {
      this.$message({
        showClose: true,
        message: text,
        type: 'success',
      });
    },
    warn(text) {
      this.$message({
        showClose: true,
        message: text,
        type: 'warning'
      });
    },
    btn_show() {
      if (!this.box_show) {
        this.box_show = true;
        this.box_hide = false;
      }
      // this.getPage()
    },
    btn_hide() {
      if (!this.box_hide) {
        this.box_hide = true;
        this.box_show = false;
      }
      // this.getPage1() 
      // this.getysy()
    },
    btn_slice(i) {

    },
    
    btn_spilt() {
      this.spilt = 1
      $('videoWindow' + this.toggle).removeClass("shows");
      $('videoWindow' + this.toggle).siblings().addClass("shows");
      console.log(this.toggle, 'this.toggle');
      // this.getPage()
    },
    btn_spilt_s() {
      this.spilt = 9
      $('videoWindow' + this.toggle).removeClass("shows");
      $('videoWindow' + this.toggle).siblings().removeClass("shows");
      // this.getPage()
    }
  }
}
</script>
<style scoped>
@import "../../../static/css/realTime/realTime.css";
</style>
<style>
.TDlist .el-collapse-item__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  height: .48rem;
  line-height: .48rem;
  background-color: #FFF;
  color: #303133;
  cursor: pointer;
  border-bottom: 1px solid #EBEEF5;
  font-size: .18rem;
  font-weight: 500;
  -webkit-transition: border-bottom-color .3s;
  transition: border-bottom-color .3s;
  outline: 0;
}

.TDbackground {
  background-color: #00CC46;
  color: #fff !important;
  /*border-left: 0.05rem solid #1FB456;*/
}

.shows {
  display: none;
}

.borColor {
  border: 0.03rem solid #00CC46 !important;
}

/*分页 B*/
#change_color.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #00CC46 !important;
  color: #FFF;
}

iframe {
  height: 100% !important;
}
</style>
